import React, { useState} from "react";
import {  Input, Table, Form, Button, Popconfirm, Image, Upload, message } from 'antd'

let picture = {
  purikura: '',
  pictureOne: '',
  pictureTwo: ''
}


const EditableCell = ({
    editing,
    dataIndex,
    title,
    record,
    index,
    children,
    Isupload,
    ...restProps
  }) => {
    const NodeDom =(Isupload)?  ( <Form.Item>
      <Upload  action="http://111.75.252.147:8888/app/scenic/picUpload" name="file" onChange={(info) => handleChange(info, dataIndex)}  >
    <Image className={(dataIndex === 'purikura') ? "avater" : "showImage"}  preview={false} src={picture[dataIndex]} fallback=""></Image >
 </Upload> 
 </Form.Item>)  :  (<Input />)
    return (
      <td {...restProps}>
        {editing ? (
          <Form.Item
          style={{alignContent: 'center', display: 'flex', alignItems: 'center', height: '100%'}}
            name={dataIndex}
            rules={[
              {
                required: true,
                message: `Please Input ${title}!`,
              },
            ]}
          >
          {NodeDom}
          </Form.Item>
        ) : (
          children
        )}
      </td>
    );
  };

  const handleChange = (info, value) => {
    if (info.file.status !== 'uploading') {
    }
    if (info.file.status === 'done') {
      if (value === 'purikura') {
        picture.purikura = info.file.response.data.url
      } else if (value === 'pictureOne') {
        picture.pictureOne = info.file.response.data.url
      } else {
        picture.pictureTwo = info.file.response.data.url
      }
     
      message.success('图片上传成功');
    } else if (info.file.status === 'error') {
      message.error('图片上传失败');
    }
  
  }
  
  
const EditableTable = (props) => {
    const List = props.data
    const { updateList, deleteList  } = props
    const [form] = Form.useForm();
    const [editingKey, setEditingKey] = useState('');
  
    const isEditing = (record) => record.key === editingKey;
  
    const edit = (record) => {
      form.setFieldsValue(
        record
      );
      picture.purikura = record.purikura
      picture.pictureOne = record.pictureOne
      picture.pictureTwo = record.pictureTwo
      setEditingKey(record.key);
    };
  
    const cancel = () => {
      setEditingKey('');
    };
  
    const save = async (key) => {
        const row = await form.validateFields()
        const data = {...List[key], ...row, ...picture }
        updateList(data)
        setEditingKey('');
    };

    const deleteUser = (id) => {
        deleteList(id)
    }
  
    const columns = [
      {
        title: '贫困户Id',
        dataIndex: 'poorId',
        width: '80px',
        editable: false,
        Isupload: false,
        align: 'center' ,
      },
      {
        title: '姓名',
        dataIndex: 'poorName',
        width: '160px',
        editable: true,
        Isupload: false,
        align: 'center' ,
      },
      {
        title: '性别',
        dataIndex: 'poorSex',
        width: '80px',
        editable: true,
        Isupload: false,
        align: 'center' ,
      },
      {
        title: '年龄',
        dataIndex: 'poorAge',
        width: '80px',
        editable: true,
        Isupload: false,
        align: 'center' ,
      },
      {
        title: '家庭地址',
        dataIndex: 'homeAddress',
        width: '180px',
        editable: true,
        Isupload: false,
        align: 'center' ,
      },
      {
        title: '头像',
        dataIndex: 'purikura',
        width: '100px',
        editable: true,
        align: 'center' ,
        Isupload: true,
        render: (_,record) => {
          return <Image  src={record.purikura} fallback="" style={{width: '50px', height: '50px'}}></Image >
        }
      },
      {
        title: '致贫原因',
        dataIndex: 'poorContent',
        width: '360px',
        align: 'center' ,
        editable: true,
        Isupload: false,
        render: (_, record) => {
          return <div className="textHd2">{record.poorContent}</div>
        }
      },
      {
        title: '家境图一',
        dataIndex: 'pictureOne',
        width: '220px',
        align: 'center' ,
        editable: true,
        Isupload: true,
        render: (_,record) => {
            return <Image className="showImage"  src={record.pictureOne} fallback="" ></Image >
          }
      },
      {
        title: '家境图一',
        dataIndex: 'pictureTwo',
        width: '160px',
        align: 'center' ,
        editable:true,
        Isupload: true,
        render: (text,record) => {
         return <Image className="showImage"  src={record.pictureTwo} fallback="" ></Image >
        }
      },
      {
        title: '操作',
        align: 'center' ,
        dataIndex: 'operation',
        width: '180px',
        render: (text,record) => {
          const editable = isEditing(record);
          return editable ? (
            <div style={{display: 'flex',marginTop: '-18px', justifyContent: 'space-around', justifyItems: 'space-around'}}>
                 <Button  onClick={() => save(record.key)} className="successBtn">修改</Button>
                 <Button  onClick={() => cancel()} className="backBtn">取消</Button>
            </div>
          ) : (
            <div  style={{display: 'flex', justifyContent: 'space-around'}}>
              <Button onClick={() => edit(record)} className="editBtn">编辑</Button>
              <Popconfirm title="改操作将会有就删除这条数据, 是否继续" onConfirm={() => deleteUser(record.poorId)} okText="确认" cancelText="取消">
              <Button className="deleteBtn">删除</Button>
              </Popconfirm>
            </div>
          );
        },
      },
    ];
    const mergedColumns = columns.map((col) => {
      if (!col.editable) {
        return col;
      }
  
      return {
        ...col,
        onCell: (record) => ({
          record,
          dataIndex: col.dataIndex,
          title: col.title,
          editing: isEditing(record),
          Isupload: col.Isupload
        }),
      };
    });

    return (
      <Form form={form} component={false}>
        <Table
          components={{
            body: {
              cell: EditableCell,
            },
          }}
          pagination={false}
          bordered
          dataSource={List}
          columns={mergedColumns}
          rowClassName="editable-row"
        />
      </Form>
    );
  };

  export default EditableTable;
  
  
  
  